<!-- 设备编号 -->
<script setup name="equipmentNumber">
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import { getEquipList, reportList, reportInfo } from "../api/login.js";
const loading = ref(false);
const state = reactive({
  formInline: {
    equipment: "",
  },
  vinVal: "",
  options: [],
  active: sessionStorage.getItem("activeTabs") || 0,
  activeList: ["检测设备", "检测列表"],
  tableData: [],
});
const getList = () => {
  getEquipList()
    .then((res) => {
      if (res && res.code == 200) {
        state.options = res.data || [];
        if (state.options.length) {
          state.formInline.equipment =
            sessionStorage.getItem("chooseequipment") ||
            state.options[0].equipNum;
          sessionStorage.setItem("chooseequipment", state.formInline.equipment);
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
const changes = (val) => {
  sessionStorage.setItem("chooseequipment", state.formInline.equipment);
  if (!val) {
    showNotify({
      message: "请选择检测设备",
      color: "#ffffff",
      background: "#ff3b30",
      duration: 1000,
    });
  }
};
const confirm = () => {
  if (state.formInline.equipment) {
    sessionStorage.setItem("chooseequipment", state.formInline.equipment);
    router.push("/carNumber");
  } else {
    showNotify({
      message: "请选择检测设备",
      color: "#ffffff",
      background: "#ff3b30",
      duration: 1000,
    });
  }
};
const tabClick = (val) => {
  state.active = val;
  sessionStorage.setItem("activeTabs", val);
};
const getTableData = () => {
  loading.value = true;
  reportList({ carVin: state.vinVal })
    .then((res) => {
      if (res.code == 200) {
        state.tableData = res.rows || [];
      }
    })
    .finally((err) => {
      loading.value = false;
    });
};
const onClickButton = (val) => {
  if (val) {
    state.vinVal = "";
  }
  getTableData();
};
// 刷新
const goDetails = (val) => {
  loading.value = true;
  reportInfo(val)
    .then((res) => {
      if (res.code == 200) {
        let obj = {
          synResult: res.data?.synResult || null,
          carNum: res.data?.carNum || null,
          carVin: res.data?.carVin || null,
          jcCarBaseInfo: res.data?.jcCarBaseInfo || {},
          obditemList: res.data?.obditemList || [],
          organName: res.data?.organName || null,
          reportEndTime: res.data?.reportEndTime || null,
          reportNum: res.data?.reportNum || null,
          detectResult: res.data?.detectResult || null,
        };
        sessionStorage.setItem("details", JSON.stringify(obj));
        sessionStorage.setItem("carNum", obj.carNum),
          router.push("/resultPage");
      }
    })
    .catch((err) => {
      loading.value = false;
    });
};
onMounted(() => {
  getList();
  getTableData();
});
</script>
<template>
  <div class="equipment_number">
    <top-title title="检测设备编号" @backbtn="router.push('/login')" />
    <div class="top_tabs">
      <div
        class="top_tabs_item"
        v-for="(item, index) in state.activeList"
        :key="index"
        @click="tabClick(index)"
        :class="index == state.active ? 'active_class' : ''"
      >
        {{ item }}
      </div>
    </div>
    <div>
      <div class="app_content" v-if="state.active == 0">
        <el-form :model="state.formInline" class="demo-form-inline">
          <el-form-item label="检测设备">
            <el-select
              v-model="state.formInline.equipment"
              placeholder="请选择检测设备"
              clearable
              size="large"
              @change="changes"
            >
              <el-option
                v-for="item in state.options"
                :key="item.equipNum"
                :label="item.equipName"
                :value="item.equipNum"
              >
                <span style="float: left">{{ item.equipName }}</span>
                <span
                  style="
                    float: right;
                    color: var(--el-text-color-secondary);
                    font-size: 13px;
                  "
                >
                  {{ item.equipNum }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <van-button
          color="#1c4880"
          block
          style="margin-top: 30px"
          @click="confirm"
        >
          确定
        </van-button>
      </div>
      <div v-else class="app_content check_list">
        <van-search
          v-model="state.vinVal"
          show-action
          placeholder="请输入VIN查询"
        >
          <template #action>
            <span class="search_btn reset" @click="onClickButton(true)"
              >重置</span
            >
            <span class="search_btn" @click="onClickButton(false)">查询</span>
          </template>
        </van-search>
        <el-table
          class="tables"
          :data="state.tableData"
          v-loading="loading"
          element-loading-text="获取数据中..."
          border
          style="width: 100%"
          scrollbar-always-on
        >
          <el-table-column prop="carNum" label="车牌号" width="100" />
          <el-table-column prop="carVin" label="VIN" />
          <el-table-column prop="reportEndTime" label="检测日期" width="100" />
          <el-table-column label="操作" align="center" width="50">
            <template #default="scope">
              <span
                @click="goDetails(scope.row.reportNum)"
                style="color: #1c4880"
                v-if="['0', '1'].includes(scope.row.reportStatus)"
              >
                查看报告
              </span>
              <span v-else> -- </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.el-table .cell {
  padding: 0px 5px !important;
}
</style>
<style lang="scss" scoped>
.equipment_number {
  .check_list {
    padding: 0px;
    height: calc(100vh - 236px);
    margin: 20px;
    .search_btn {
      display: inline-block;
      box-sizing: border-box;
      color: #fff;
      background: #1c4880;
      padding: 0px 8px;
      border-radius: 4px;
      cursor: pointer;
    }
    .reset {
      background: #2f79c7;
      margin-right: 10px;
    }
    .tables {
      height: calc(100% - 60px);
    }
  }
  .top_tabs {
    box-sizing: border-box;
    margin-top: 10px;
    display: flex;
    padding: 0px 20px;
    .top_tabs_item {
      width: 50%;
      border: 1px solid #f7f7f7;
      text-align: center;
      height: 38px;
      font-size: 15px;
      line-height: 38px;
      background: #ffffff;
      cursor: pointer;
      color: #1c4880;
      &:first-child {
        border-right: none;
      }
    }
    .active_class {
      background: #1c4880;
      color: #ffffff;
    }
  }
  .el-form {
    box-sizing: border-box;
    padding: 20px 10px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 5px 4px 3px #888888;
  }
}
</style>
